<template>
  <div class="all">
<div class="comp" v-for='(item,index) in records' :key='index' @click="read(item.id)" >
    <div class="left" >
        
        <img v-if="item.title=='系统消息'" src="../../assets/消息中心/系统消息.png" alt="" height="60%" width="60%">
        <img v-else-if="item.title=='个人消息'" src="../../assets/消息中心/个人信息.png" alt="" height="60%" width="60%">
        <div class="dot" v-show='item.isReader==1'>
            <img src="../../assets/消息中心/红点.png" alt="">
        </div>

    </div>
    <div class="center" >
        <ul>
            <li>{{item.title}} <i><img v-if='item.top==1' src="../../assets/消息中心/置顶.png" alt="" ></i></li>
            <li>发布人：  <span>{{item.sourceName}}</span></li>
        </ul>
    </div>
    <div>
    <span>{{item.createTime}}</span><van-icon name="arrow" />
    </div>
    
</div>  
  </div>
</template>

<script>
import {isread} from '../../request/api' 
export default {
    data(){return{
   
    }},
    props:['records'],
created(){
   
},
methods:{
  read(val){
      this.$router.push({name:'detailMessage',params:{id:val}})
       isread(val).then(res=>{
        console.log(res);
    })
  }
}
}
</script>

<style lang='less'>
.all{
     background: white;
    
}
.comp{
    font-size: .15rem!important;
    display: flex;
    line-height: .2rem;
   
    justify-content:space-between;
    margin: 5% 5%;
    align-items: center;
    .center{
         text-align:left;
         flex: 1;
    }
    .left{
        text-align: center;
        width: 20%;
         position: relative;
       .dot{
           position: absolute;
           top:-20%;
           right: 20%;
       }
    }
    img{
        vertical-align:bottom;
    }
    
    
}
</style>